<template>
  <div>
    <!--        轮播图-->
    <el-carousel height="400px" style="margin-top: 10px;">
      <el-carousel-item v-for="item in swipper" :key="item">
        <el-image :src="item" />
      </el-carousel-item>
    </el-carousel>
    <div style="width: 200px; margin: 0 auto;">
      <a-divider>热门企业</a-divider>
    </div>
    <el-row :gutter="10">
      <el-col v-for="index in 4" :key="index" :span="6">
        <el-card class="box-card" shadow="hover">
          <div @click="toCompanyInfo(company[index].companyId)">
            <el-avatar style="margin-top: 30px;" shape="square" :size="58" :src="company[index].companyLogo" />
            <div style="margin-top: 8px; font-size: 16px;">{{ company[index].companyName }}</div>
            <div style="margin: 20px auto;">
              <span style="font-size: 12px; margin: 0 auto;">{{ company[index].companyType }}</span>
            </div>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <div style="margin-bottom: 20px;">
      <el-button @click="toCompany">查看更多</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      userId: '',
      user: '',
      list: '',
      input3: '',
      activeName: 'first',
      swipper: [
        'http://s11.jiuyeb.cn/2020/12/29/1609205429-17.jpg!auto',
        'http://s11.jiuyeb.cn/2020/06/03/1591173929-73.jpg!auto'
      ],
      company: []
    }
  },
  created() {
    const _this = this
    this.$http.get('/company/findAllCompany').then(function(resp) {
      _this.company = resp.data.data
    })
    const userId = this.$route.params.userId
    this.$http.get('user/findOneUser?id=' + userId).then(function(resp) {
      _this.user = resp.data
    })
    this.$store.state.userId = userId
  },
  methods: {
    toCompany: function() {
      this.$router.push('company')
    },
    toCompanyInfo: function(companyId) {
      this.$router.push({ name: 'CompanyInfo', params: { companyId: companyId }})
    }
  }
}
</script>

<style scoped lang="scss">
  @import url('../../icons/home.css');

  #components-layout-demo-basic {
    text-align: center;
  }
  #components-layout-demo-basic .ant-layout-header,
  #components-layout-demo-basic .ant-layout-footer {
    display: flex;
    background: #FFFFFF;
    color: #fff;
    line-height: 50px;
    height: 50px;
  }
  #components-layout-demo-basic .ant-layout-header{
  .u-avatar{
    align-self: center;
  }
  }
  #components-layout-demo-basic .ant-layout-footer {
    line-height: 1.5;
  }
  #components-layout-demo-basic .ant-layout-content {
    color: #fff;
    min-height: 680px;
    width: 1184px;
    margin: 0 auto;
  }
  #components-layout-demo-basic > .ant-layout {
    margin-bottom: 48px;
  }
  #components-layout-demo-basic > .ant-layout:last-child {
    margin: 0;
  }
  .menuEdit {
    width: 100%;
    line-height: 50px;
    height: 100%;
  }
  .el-select .el-input {
    width: 200px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-row {
    margin-bottom: 15px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 284px;
    height: 238px;
  }
  .emp-card {
    width: 384px;
    height: 150px;
  }

  .el-carousel__item{
    color: #ffffff;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
</style>
